<template>
  <div>
    <el-form ref="form" :data="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="8">
          <el-form-item label="设备">
            <el-select
              v-model="form.stockId"
              placeholder="请选择设备"
              @change="price(form.stockId)"
            >
              <el-option
                v-for="base in basestocks"
                :label="base.name"
                :value="base.id"
                :key="base.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品单价" prop="price">
            <el-input v-model="form.price"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="使用日期">
            <el-date-picker
              type="date"
              v-model="form.useDate"
              value-format="yyyy-MM-dd"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="购买日期">
            <el-date-picker
              type="date"
              v-model="form.buyDate"
              value-format="yyyy-MM-dd"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="购买数量"
            prop="buySum"
        
          >
            <el-input
              v-model="form.buySum"
              @change="money"
              placeholder="请输入0以上数字"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="金额">
            <el-input v-model="form.money"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="购买人">
        <el-input v-model="form.buyman" style="width: 200px"></el-input>
      </el-form-item>

      <el-form-item label="描述">
        <el-input
          type="textarea"
          v-model="form.description"
          :rows="10"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="reset">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="" :visible.sync="dialogVisible" width="30%">
      <span>确定提交？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        buyman: "",
        stockId: "",
        useDate: "",
        buySum: "",
        buyDate: "",
        description: "",
        money: "",
        price: "",
      },
      dialogVisible: false,
      basestocks: {},
      rules: {
        buySum:[ 
              { required: true, message: '不能为空' },
              {type: 'integer', message: '请输入数字类型', trigger: 'change'},
            ]
      },
    };
  },
  methods: {
    onSubmit() {
      this.dialogVisible = true;
    },
    add() {
      console.log(this.form);
      this.axios.post("/buy/addCheck", this.form).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$message({
            message: "成功",
            offset: 150,
            duration: 1000,
            type: "success",
          });
          this.dialogVisible = false;
          this.reset();
        } else {
          this.$message.error({
            message: "失败",
            offset: 150,
            duration: 1000,
          });
        }
      });
    },
    price(id) {
      //alert(this.form.stockId)
      console.log("2222" + this.form.stockId);
      this.basestocks.forEach((item, index, arry) => {
        if (this.form.stockId == item.id) {
          console.log("wwwwwww");
          this.form.price = item.price;
          return;
        }
      });
    },
    money() {
      console.log("123123" + this.form.buySum);
      this.form.money = this.form.buySum * this.form.price;
    },
    reset() {
      (this.form.buyman = ""),
        (this.form.stockId = ""),
        (this.form.useDate = ""),
        (this.form.buySum = ""),
        (this.form.buyDate = ""),
        (this.form.description = ""),
        (this.form.money = ""),
        (this.form.price = "");
    },
    //得到设备列表
    getbasestock() {
      this.axios.get("/buy/getBaseStocks").then((res) => {
        console.log(res.data.data);
        this.basestocks = res.data.data;
      });
    },
  },
  created() {
    this.getbasestock();
  },
};
</script>
<style scoped>
</style>